<template>
	<view class="my-settings">
		<view class="form">
			<view class="form_item">
				<text class="item_lab">店铺名称</text>
				<input class="item_input" v-model="form.shop_name" placeholder-style="color: #8B8B8B;" placeholder="请输入店铺名称"
					type="text">
				<image class="item_icon" src="/static/pages/image/area_right.png"></image>
			</view>
			<view class="form_item">
				<text class="item_lab">联系方式</text>
				<input class="item_input" v-model="form.phone" placeholder-style="color: #8B8B8B;" placeholder="请输入联系方式"
					type="text">
				<image class="item_icon" src="/static/pages/image/area_right.png"></image>
			</view>
			<view class="form_item" @click="toSelectMap">
				<text class="item_lab">地理位置</text>
				<input class="item_input" disabled v-model="form.address" placeholder-style="color: #8B8B8B;"
					placeholder="请输入店铺位置" type="text">
				<image class="item_icon" src="/static/pages/image/area_right.png"></image>
			</view>
			<view class="form_vertical">
				<!-- <text class="item_lab">主营业务</text> -->
				<textarea class="item_textarea" v-model="form.introduction" placeholder="介绍一下店铺主营业务" placeholder-style="color: #8B8B8B;" value="" />
			</view>

			<view class="upImg">
				<view class="upImg_title">
					<text class="title_txt">店铺封面</text>
				</view>
				<view class="upImg_content">
					<view class="upImg_item"
						:style="'background-image: url('+form.shop_image+'); background-size: 100% 100%;'">
						<!-- <image class="item_icon" src="/static/pages/image/tupiangb_btn.png" @click="delImg">
						</image> -->
						<!-- <view class="item_bottom" style="background-color: rgba(0,0,0,0.5);" @click="upImage">
							<text class="item_txt">重新上传</text>
						</view> -->
					</view>
					<view class="upImg_item upImg" @click="upImage(null)" data-type="2">
						<image src="/static/pages/image/upImg.png" class="upImg_img"></image>
						<view class="item_bottom">
							<text class="item_txt">点击上传</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="btn">
			<button type="default" class="submit" @click="save">保存</button>
		</view>
	</view>
</template>

<script>
	var app = getApp();

	export default {
		data() {
			return {
				form: {
					shop_image:'',
					shop_name:'',
					phone:'',
					introduction:'',
					address:''
				},
				images: []
			}
		},
		onLoad() {
			this.getDetails()
		},
		methods: {
			save(){
				const parmas = {
					m: "monai_market",
					r: "shop.index.upshop",
					uid:uni.getStorageSync('uid'),
					shop_id:this.form.id
				}
				// this.form.shop_image = this.images.join(',')
				const data = Object.assign(parmas,this.form)
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data,
					success: res => {
						uni.showToast({
							title: '保存成功',
							duration: 2000,
							icon: 'none'
						});
						
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					},
					fail: res => {}
				});
			},
			getDetails(){
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: {
						m: "monai_market",
						r: "shop.index.shopde",
						uid:uni.getStorageSync('uid')
					},
					success: res => {
						this.form = Object.assign(this.form,res.data.data)
						// this.images = this.form.shop_image.split(',')
					},
					fail: res => {}
				});
			},
			toSelectMap() {
				let that = this
				uni.showLoading({
					title: '正在选择地图'
				})
				uni.authorize({
					scope: 'scope.userLocation',
					success(res) {
						that.chooseLocation()
					},
					fail(error) {
						// 判断是否取消
						if (error.errMsg == 'authorize:fail auth deny') {
							uni.showToast({
								title: '获取权限失败',
								duration: 2000,
								icon: 'none'
							});
						}
						if (error.errMsg.indexOf('12006') != -1) {
							that.openSetting()
						}
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			openSetting() {
				let that = this
				uni.openSetting({
					success(res) {
						if (res.authSetting['scope.userLocation']) {
							that.chooseLocation()
						}
					}
				});
			},
			// 选择位置
			chooseLocation() {
				let that = this
				uni.chooseLocation({
					success: function(res) {
						that.form.address = res.address
						that.form.latitude = res.latitude
						that.form.longitude = res.longitude
					},
					fail: function(error) {
						uni.showToast({
							title: '取消选择位置',
							duration: 2000,
							icon: 'none'
						});
					}
				});
			},

			delImg(index) {
				this.images.splice(index, 1);
			},

			upImage(index) {
				app.globalData.upimgs({
					scannums: 9,
					filename: "cars",
					success: a => {
						for (var t in a) {
							this.form.shop_image = a[t].all
							// if (this.images.length <= 9) {
							// 	// index ? this.replaceImgs(a[t], index) : this.addinImgs(a[t])
							// } else {
							// 	app.globalData.util.message({
							// 		title: "您添加的图片已经很多了",
							// 		type: "error"
							// 	});
							// 	return;
							// }
						}
					}
				});
			},

			addinImgs(a) {
				this.images.push(a.all);
			},

			replaceImgs(a, index) {
				this.images[index] = a.all
			},

		}
	}
</script>

<style scoped lang="scss">
	.my-settings {

		.form {
			padding: 0 30rpx;
			box-sizing: border-box;

			.form_item {
				display: flex;
				align-items: center;
				padding: 35rpx 0;
				box-sizing: border-box;
				justify-content: space-between;
				border-top: 2rpx solid #F4F6F8;

				.item_input {
					flex: 1;
					padding-right: 10rpx;
					font-size: 30rpx;
					font-weight: 500;
				}

				.item_icon {
					width: 15rpx;
					height: 25rpx;
				}
			}


			.item_lab {
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
				margin-right: 89rpx;
			}

			.form_vertical {
				padding: 35rpx 0;
				display: flex;
				flex-direction: column;

				.item_textarea {
					padding: 20upx 28upx;
					box-sizing: border-box;
					margin-top: 30upx;
					width: 100%;
					height: 236upx;
					border: 1px solid #E5E5E5;
					border-radius: 10upx;
				}
			}

			.upImg {
				padding: 0 30rpx;
				box-sizing: border-box;

				.upImg_title {
					margin-bottom: 23rpx;

					.title_txt {
						font-size: 30rpx;
						font-weight: 500;
						color: #333333;
					}
				}

				.upImg_content {
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					grid-row-gap: 34rpx;
					grid-column-gap: 34rpx;

					.upImg_item {
						position: relative;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 7px;
						height: 199rpx;
					}

					.item_icon {
						position: absolute;
						right: 0;
						top: 0;
						width: 29rpx;
						height: 25rpx;
					}

					.item_bottom {
						position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
						width: 100%;
						height: 60rpx;
						text-align: center;
						line-height: 60rpx;
						background: #000000;
						opacity: 0.5;
						border-radius: 0px 0px 10rpx 10rpx;
						font-size: 26rpx;
						font-weight: 500;
						color: #FFFFFF;
					}

					.upImg_img {
						width: 79rpx;
						height: 76rpx;
						margin-top: -34rpx;
					}

					.item_bottom {
						background: #03BA80;
						border-radius: 0px 0px 10px 10px;
					}
				}
			}
		}
		
		.btn{
			width: 100%;
			margin-top: 140upx;
			padding: 0 30upx;
			box-sizing: border-box;
			
			.submit{
				height: 114upx;
				line-height: 114upx;
				background: linear-gradient(-87deg, #0CD8C2, #0BC2AE);
				border-radius: 57upx;
				font-size: 36upx;
				color: #FFFFFF;
			}
		}
	}
</style>
